<template>
<div id="bg" class="bg">
    <canvas></canvas>
    <div class="login" @keyup.13="doLogin">
        <div class="form-horizontal login">
            <div class="logo">下载器数据后台</div>
            <div style="width: 70%;position: relative;top: 0px;left: 12%;">
                <div class="form-group input-group input-group-lg ">
                    <span class="input-group-addon"><i class="fa fa-user-o" aria-hidden="true"></i></span>
                    <el-input v-model="userInfo.username" placeholder="username" style="margin:20px 0px 20px 0px;"></el-input>
                </div>
                <div class="form-group input-group input-group-lg">
                    <span class="input-group-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
                    <el-input v-model="userInfo.password"  type="password" placeholder="password"></el-input>
                </div>
                <div class="form-group">
                    <el-button type="primary" style="margin-top:15px;width: 100%;" @click="doLogin">登 录</el-button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            getLoginUrl: '' + this.$store.state.domain + '/bzDCP/login',
            userInfo: {
                username: '',
                password: '',
            },
            show: false,
        }
    },
    methods: {
        doLogin() {
            if (this.username == '') {
                this.$message.warning('用户名不能为空');
                return false
            }
            if (this.password == '') {
                this.$message.warning('密码名不能为空');
                return false
            }
            this.$ajax.post(this.getLoginUrl, this.qs.stringify({
                username: this.userInfo.username,
                password: this.userInfo.password
            })).then(response => {
                if (response.data.code == 200) {
                    localStorage.username = this.userInfo.username;
                    localStorage.token = response.data.token;
                    this.$store.state.loginStat = response.data;
                    this.$notify({
                        title: '提示信息',
                        message: '登录成功',
                        type: 'success'
                    });
                    this.$router.push({
                        path: '/DataScreen'
                    })
                } else {
                    this.$notify({
                        title: '提示信息',
                        message: '账号或密码错误',
                        type: 'error'
                    });
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    },
    mounted() {
        //登录背景canvas
        document.addEventListener('touchmove', function (e) {
            e.preventDefault()
        })
        var c = document.getElementsByTagName('canvas')[0],
            x = c.getContext('2d'),
            pr = window.devicePixelRatio || 1,
            w = window.innerWidth,
            h = window.innerHeight - 5,
            f = 90,
            q,
            m = Math,
            r = 0,
            u = m.PI * 2,
            v = m.cos,
            z = m.random
        c.width = w * pr
        c.height = h * pr
        x.scale(pr, pr)
        x.globalAlpha = 0.6

        function i() {
            x.clearRect(0, 0, w, h)
            q = [{
                x: 0,
                y: h * .7 + f
            }, {
                x: 0,
                y: h * .7 - f
            }]
            while (q[1].x < w + f) d(q[0], q[1])
        }

        function d(i, j) {
            x.beginPath()
            x.moveTo(i.x, i.y)
            x.lineTo(j.x, j.y)
            var k = j.x + (z() * 2 - 0.25) * f,
                n = y(j.y)
            x.lineTo(k, n)
            x.closePath()
            r -= u / -50
            x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
            x.fill()
            q[0] = q[1]
            q[1] = {
                x: k,
                y: n
            }
        }

        function y(p) {
            var t = p + (z() * 2 - 1.1) * f
            return (t > h || t < 0) ? y(p) : t
        }
        document.onclick = i
        document.ontouchstart = i
        i()
    }
}
</script>

<style scoped>
.bg {
    /* Chrome all / Safari all /opera15+*/
    -webkit-user-select: none;
    /* Firefox all */
    -moz-user-select: none;
    /* IE 10+ */
    -ms-user-select: none;
    /* 通用 */
    user-select: none;
    overflow: hidden;
}

.login {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 50px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.login-btn {
    background-color: whitesmoke;
}

.logo {
    font-family: "DejaVu Sans Mono";
    color: #409EFF;
    font-size: 50px;
    margin-left: 10px;
}
</style>
